import React, { FC, useState } from 'react';
import { Form, Input, Select, Checkbox, Row } from 'antd';
import CommonModal from '@/components/Modal/CommonModal';
import { ModalStatus } from '@/constants/common';
import { FormComponentProps } from 'antd/lib/form';
import {
  IDepartmentFilterOpts,
  ICreateDepartmentParams,
  IDepartmentListItem,
} from '@/services/manageDepartment';

const FormItem = Form.Item;
const { Option } = Select;
const CGroup = Checkbox.Group;

const FormItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

interface IDepartmentModalProps extends FormComponentProps {
  loading: boolean;
  selectedItem: IDepartmentListItem;
  status: ModalStatus;
  filterOpts: IDepartmentFilterOpts;
  hideModal: () => void;
  createItem: (params: ICreateDepartmentParams) => Promise<any>;
  updateItem: (params: ICreateDepartmentParams) => Promise<any>;
  refreshList?: () => void;
  setItemInfo: (params: IDepartmentListItem) => void;
}

const DepartmentModal: FC<IDepartmentModalProps> = props => {
  const {
    status,
    hideModal,
    form,
    createItem,
    updateItem,
    refreshList,
    setItemInfo,
    selectedItem,
    filterOpts,
    loading,
  } = props;
  const { getFieldDecorator } = form;
  const { type = [], platform = [] } = filterOpts;

  const doConfirm = () => {
    form.validateFields((err, values) => {
      if (!err) {
        if (status === ModalStatus.Create) {
          setItemInfo({ ...values });

          createItem(values).then(() => {
            hideModal();
            refreshList && refreshList();
          });
        } else {
          setItemInfo({ ...selectedItem, ...values });

          updateItem({ id: selectedItem.id, ...values }).then(() => {
            hideModal();
            refreshList && refreshList();
          });
        }
      }
    });
  };

  return (
    <CommonModal
      visible={status === ModalStatus.Edit || status === ModalStatus.Create}
      title={status === ModalStatus.Create ? '新增项目' : '修改项目'}
      btnOkText={status === ModalStatus.Create ? '确定' : '保存'}
      onCancel={hideModal}
      onOk={doConfirm}
      loading={loading}
    >
      <Form {...FormItemLayout} colon={false} labelAlign="right">
        <FormItem label="项目名称">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入项目名称' }],
          })(<Input placeholder="请输入项目名称" />)}
        </FormItem>
        <FormItem label="项目类型">
          {getFieldDecorator('type')(
            <Select placeholder="请选择" allowClear>
              {type.map((item, index) => (
                <Option value={item} key={`${item}-${index}`}>
                  {item}
                </Option>
              ))}
            </Select>,
          )}
        </FormItem>
        <FormItem label="项目标签">
          {getFieldDecorator('tags', {
            rules: [{ required: true, message: '请选择项目标签' }],
          })(
            <CGroup>
              <Row style={{ marginBottom: '10px' }}>
                <Checkbox value="协作中心">协作中心</Checkbox>
                <Checkbox value="招引单位">招引单位</Checkbox>
                <Checkbox value="落地单位">落地单位</Checkbox>
              </Row>
              <Row>
                <Checkbox value="服务单位">服务单位</Checkbox>
                <Checkbox value="落实单位">落实单位</Checkbox>
                <Checkbox value="政策单位">政策单位</Checkbox>
              </Row>
            </CGroup>,
          )}
        </FormItem>
        <FormItem label="关联平台">
          {getFieldDecorator('platform')(
            <Select placeholder="请选择" allowClear>
              {platform.map((item, index) => (
                <Option value={item} key={`${item}-${index}`}>
                  {item}
                </Option>
              ))}
            </Select>,
          )}
        </FormItem>
      </Form>
    </CommonModal>
  );
};

const WrappedDepartmentModal = Form.create<IDepartmentModalProps>({
  mapPropsToFields(props) {
    const { selectedItem } = props;

    return {
      name: Form.createFormField({
        value: selectedItem.name || '',
      }),
      type: Form.createFormField({
        value: selectedItem.type,
      }),
      tags: Form.createFormField({
        value: selectedItem.tags,
      }),
      platform: Form.createFormField({
        value: selectedItem.platform,
      }),
    };
  },
})(DepartmentModal);

export default WrappedDepartmentModal;
